<template>
  
   <div class="first">
     <div class="video-warp">
         <video autoplay=""  preload="preload" loop="" :src="welcome_video"  class="videoElment" muted></video>
     </div>
   </div>
   
    <div class="register"> 
         <div class="head">
             <img :src="lo_path"><p class="title">注册用户</p></div>
         <div class="register-form">
         <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :label-position="labelPosition">
            <div class="left-from">
            <el-form-item label="昵称:" prop="userName">
                <el-input v-model="ruleForm.userName" placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="请确认密码"></el-input>
            </el-form-item>
            </div>
              
                <el-form-item label="手机号:" prop="account">
                    <el-input v-model="ruleForm.account" placeholder="请输入手机号" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
                </el-form-item>
                <el-form-item label="交易密码:"  prop="paypassword">
                    <el-input v-model="ruleForm.paypasssword" autocomplete="off"  placeholder="请输入交易密码"></el-input>
                </el-form-item>
               
            <div class="register-btn">
               <el-row>
                    <el-button type="danger" @click="register()">注册</el-button>
                    <el-button type="info" @click="reset()">重置</el-button>       
                    </el-row> 
            </div>
            </el-form>
            </div>


            <div class="login-bottom">
                    <ul>
                        <li><i class="iconfont icon-QQ-circle-fill"></i><span>QQ登录</span></li>
                        <li><i class="iconfont icon-wechat"></i><span>微信登录</span></li>
                        <li><i class="iconfont icon-weibo-copy"></i><span>微博登录</span></li>
                        <li><i class="iconfont icon-shouji1"></i><span><a @click="login()">手机号登录</a></span></li>
                        <li><i class="iconfont icon-shouji1"></i><span><a @click="login()">密码登录</a></span></li>
                    </ul>
             </div>
    </div>
</template>

<script>
import { ElMessage } from 'element-plus'
 import user from '@/api/user/user'
    export default {      
             data() {
     
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      // 邮箱校验规则
            var checkEmail = (rule, value, callback) => {
                let emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;            
                if (emailReg.test(value) || value == '') {
                    return callback();                
                } else {
                    callback(new Error("邮箱格式错误"));
                }
            };
      return {
         labelPosition: 'right',
         lo_path:require("../../assets/lo.jpg"),
         welcome_video:require("../../assets/welcome-video.mp4"),
         welcome_img:require("../../assets/welcome-video-poster-v2.png"),
         ruleForm: {
          userName: '',
          password: '',
          checkPass: '',
          account: '',
          paypasssword:'',
        },
        rules: {
          userName: [
                  { required: true, message: '请输入昵称', trigger: 'blur' },
                  { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          account:[
                 { required: true, message: '请输入手机号', trigger: 'blur' },
                  { min: 11, max: 11, message: '长度为11个数字', trigger: 'blur' }
          ],
           paypasssword: [
           { required: true, message: '请输入交易密码', trigger: 'blur' },
                  { min: 6, max: 6, message: '长度为6个数字', trigger: 'blur' }
          ],
        }
      };
        },


        methods:{
          login(){
        this.$router.push({ path:'/login'});
        },
        //注册功能
        register(){
            this.$refs["ruleForm"].validate((valid) => {
                //校验失败
                if (!valid) return ;
                //校验成功 发送请求 axios  get() --->method:get  put: method:put
                user.registerUser(this.ruleForm).then((response) => {
                   console.log(response);
                   if(response.data.meta.status===20000){
                         ElMessage({
                                showClose: true,
                                message: '注册成功',
                                type: 'success',
                            });
                     this.$router.push({ path:'/login'});
                    }else{
                         ElMessage({
                                showClose: true,
                                message: response.data.meta.msg,
                                type: 'error',
                            });
                            
                    }
                   
                })
            });           
        },
             //重置功能
        reset(){
             this.$refs.ruleForm.resetFields();
        }
        }
    }
</script>

<style lang="scss" scoped>
@import url('http://at.alicdn.com/t/c/font_3772258_z7osqrhf8w.css');
.first{
   position: absolute;
    width: 100%;
    height: 100%;
    min-width: 1024px;
    margin: 0;
    padding: 0;
    font-size: 100%;
    box-sizing: border-box;
   
}
.video-warp{
    position: absolute;
    padding:0px;
    margin:0px;
    font-size: 100%;
    z-index: -1;
    
}
.videoElment{
   width:100%;
   height:100%;
   /* object-fit:fill; */
}
.register{
    
        position:absolute;
        background:#fff;   
        border:2px solid red;
        width:700px;
        height: 430px;
        margin:0 auto;
       margin-top:8%; 
        margin-left:28%;
        background: #fff;
        /* position:absolute; */
         display:flex;
         flex-wrap: wrap;
        /* transform: translate(-50%,-50%); */
        box-shadow: 0 0 5px 5px #DDD;
        border-radius: 10px; 
          background:url(../../assets/lo.jpg)
    }
    .head>img{
        width:100px;
        height:80px;
        background-size:100% 100%;
        position:absolute;
        // margin-left:-300px;
       
    }
    .head{
         font-size:25px;
        /* margin-left:0; */
        margin:0 auto;
        margin-top:20px;
        color:red;
        height:50px;
        width:700px;
       
    }
    .title{
         font-size:25px;
        /* margin-left:0; */
        margin:0 auto;
        margin-top:20px;
        color:red;
        height:50px;
        width:100px;
       
    }
    .logo_div{
     
     position:absolute;
     width:80px;
     height:80px;
     margin-top:0px;
     margin-left:50px;
    
    }
    .register-form{
        margin-top:-50px;
        display:flex;
        /* padding:0 25px; */
        width:700px;
        height:250px;
       flex-wrap: wrap;
     
    }
    .left-from{
        /* position:absolute; */
        /* margin-left:350px; */
        width:350px;
        height:250px;
      
        float:left;
    }
    .rigth-from{
         width:350px;
        height:250px;
    }
    .register-btn{
        position:absolute;
        float:left;
        /* width:200px; */
        height:40px;
        margin-left:255px;
        margin-top:100px;
    
    }
    .login-bottom{
        position:absolute;
        margin-top:380px;
        margin-left:60px;
        width:400px;
        display:flex;
        align-items: center;
    }
    .login-bottom>span{
      float:left;
      font-size:12px;
      margin-top:5px;
     /* color:red; */
    }
    .login-bottom ul{
         display:flex;
          align-items: center;
         list-style-type:none;
         padding:0;
         margin:0px;
         margin-left:-55px;
    }
    .login-bottom ul li{
       width:75px;
       height:25px;
       margin-left:15px;
       border-radius:50%;
        list-style-type:none;
        font-size:12px;
        cursor: pointer;
        /* font-size:25px; */
    }
      .login-bottom ul li i{
         position:absolute;
         margin-top:0px;
         font-size:23px;
         color:#666;
        text-decoration:none;      
     }
    .login-bottom ul li  span{
    position: absolute;
    width: 60px;
    margin-top: 5px;
    margin-left:25px;
    }
    .login-bottom ul li:nth-child(1):hover .icon-QQ-circle-fill {
    /* .icon-QQ-circle-fill */
    /* border:1px solid #000000; */
    color: #11bfff;
    transition: 1s;
    }
    .login-bottom ul li:nth-child(2):hover .icon-wechat{
        color: #50df67;
        transition: 1s;
    }
    .login-bottom ul li:nth-child(3):hover .icon-weibo-copy{
    
        color: #ef2c2c;
        transition: 1s;
    }
    .login-bottom ul li:nth-child(4):hover .icon-shouji1{
        color: #ffe92c;
        transition: 1s;
    }
    .login-bottom ul li:nth-child(5):hover .icon-shouji1{
        color: #ffe92c;
        transition: 1s;
    }
</style>